<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../../assets/城市学院logo.png" alt="" />
        <img class="p1" src="../../assets/实验室logo.png" alt="" />
      </div>
      <el-button type="info" @click="logout">退出</el-button></el-header
    >
    <!-- 页面主体区 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏区域 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          default-active=""
        >
          <el-menu-item
            index="welcome"
            v-show="this.isShow.welcome"
            :disabled="this.isDisabled.welcome"
          >
            <i class="el-icon-user"></i>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <!-- 一级菜单 -->
          <!-- 用户管理 -->
          <el-submenu
            index="users"
            v-show="this.isShow.users"
            :disabled="this.isDisabled.users"
          >
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/users">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>用户列表</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <!-- 中心概况 -->
          <el-submenu
            index="bc_overviews"
            v-show="this.isShow.bc_overviews"
            :disabled="this.isDisabled.bc_overviews"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>中心概况</span>
            </template>
            <el-menu-item index="/bc_centerview">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>中心简介修改</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/bc_teastaff">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>师资队伍修改</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/bc_lab">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>实验室介绍修改</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/bc_manage">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>管理制度修改</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <!-- 成果展示 -->
          <el-submenu
            index="bc_achievements"
            v-show="this.isShow.bc_achievements"
            :disabled="this.isDisabled.bc_achievements"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>成果展示</span>
            </template>
            <el-menu-item index="/bc_teareform">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>教学改革</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/bc_teaach">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>教学成果</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/bc_stuach">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>学生成果</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-submenu
            index="bc_resources"
            v-show="this.isShow.bc_resources"
            :disabled="this.isDisabled.bc_resources"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>教学资源</span>
            </template>
            <el-menu-item index="/bc_cources">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>课件资源管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/bc_soft">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>软件资源管理</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <!-- <el-submenu index="3">  
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>字典管理</span>
            </template>
          </el-submenu> -->

          <!-- <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>新闻栏目管理</span>
            </template>
            
          </el-submenu> -->

          <!-- <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>留言管理</span>
            </template>
            <el-menu-item index="/messages">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>留言列表</span>
              </template>
            </el-menu-item>
          </el-submenu> -->

          <!-- <el-submenu index="17">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>教学资源管理</span>
            </template>
            <el-menu-item index="/resources">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>课件资源列表</span>
              </template>
            </el-menu-item>
          </el-submenu> -->

          <!-- <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>盘点留言管理</span>
            </template>
          </el-submenu> -->

          <!-- <el-submenu index="9">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>菜单管理</span>
            </template>
            <el-menu-item index="/menus">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>菜单列表</span>
              </template>
            </el-menu-item>
          </el-submenu> -->

          <!-- <el-submenu index="10">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>设备管理</span>
            </template>
            <el-menu-item index="/device">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>设备列表</span>
              </template>
            </el-menu-item>
          </el-submenu> -->

          <!-- <el-submenu index="11">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>资源分类管理</span>
            </template>
            
          </el-submenu> -->

          <!-- <el-submenu index="15">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>实验项目卡管理</span>
            </template>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>添加实验项目卡</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>实验项目卡管理</span>
              </template>
            </el-menu-item>
          </el-submenu> -->

          <!-- <el-submenu index="16">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>自主开放实验室管理</span>
            </template>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>申请自主开放实验</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>自主开放实验室管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>自主开放申请书管理</span>
              </template>
            </el-menu-item>
          </el-submenu> -->

          <!-- <el-submenu index="17">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>教学情况统计管理</span>
            </template>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>添加教学运转情况</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>教学情况统计管理</span>
              </template>
            </el-menu-item>
          </el-submenu> -->

          <el-submenu
            index="admin-notice"
            v-show="this.isShow.admin_notice"
            :disabled="this.isDisabled.admin_notice"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>后台_通知管理</span>
            </template>
            <el-menu-item index="/notices">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>通知列表</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-submenu
            index="admin_new"
            v-show="this.isShow.admin_new"
            :disabled="this.isDisabled.admin_new"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>后台_新闻管理</span>
            </template>
            <el-menu-item index="/topics">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>新闻栏目列表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/news">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>新闻列表</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-submenu
            index="admin_resource"
            v-show="this.isShow.admin_resource"
            :disabled="this.isDisabled.admin_resource"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>后台_资源管理</span>
            </template>
            <el-menu-item index="/resources">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>资源列表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/category">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>资源分类列表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/test2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>测试</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-submenu
            index="admin_attachment"
            v-show="this.isShow.admin_attachment"
            :disabled="this.isDisabled.admin_attachment"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>后台_附件管理</span>
            </template>
            <el-menu-item index="/attachment">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>附件列表</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右边内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menuList: [],
      isCollapse: false,
      isShow: {
        welcome: true,
        users: true,

        bc_overviews: true,
        bc_achievements: true,
        bc_resources: true,
        
        admin_notice: true,
        admin_new: true,
        admin_resource: true,
        admin_attachment: true,
      },
      isDisabled: {
        welcome: false,
        users: false,

        bc_overviews: false,
        bc_achievements: false,
        bc_resources: false,

        admin_notice: false,
        admin_new: false,
        admin_resource: false,
        admin_attachment: false,
      },
    };
  },
  created() {
    this.getMenuList();
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/a1/a2");
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    //获取所有的菜单
    async getMenuList() {
      if (localStorage.getItem("userInfo") == undefined) {
        this.$message.error("请先登录");
        this.$router.push("/");
        return;
      }
      var userInfo = JSON.parse(localStorage.getItem("userInfo"));
      console.log(userInfo);
      const { data: res } = await this.$http.get(
        "/v1/api/menus/role/" + userInfo.roleType
      );
      if (userInfo.roleType == 0) {
        this.isShow.users = false;
        this.isShow.bc_overviews = false;
        this.isShow.bc_achievements = false;
        this.isShow.bc_resources = false;
        // this.isShow = false;
        this.isShow.admin_notice = false;
        this.isShow.admin_new = false;
        this.isShow.admin_resource = false;
        this.isShow.admin_attachment = false;

        this.isDisabled.users = true;
        this.isDisabled.bc_overviews = true;
        this.isDisabled.bc_achievements = true;
        this.isDisabled.bc_resources = true;
        // this.isDisabled = true;
        this.isDisabled.admin_notice = true;
        this.isDisabled.admin_new = true;
        this.isDisabled.admin_resource = true;
        this.isDisabled.admin_attachment = true;
      }

      if (res.msg != "success") return this.$message.error("请求失败");
      this.menuList = res.data;
      // console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    .p1 {
      margin-left: 20px;
    }
  }
}
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #eaedf1;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
